<template>
  <q-layout
    class="column no-wrap"
    style="overflow: hidden;min-height: 640px !important"
  >
    <q-bar class="q-electron-drag shadow-2 title-bar" dense>
      <q-img style="width:60px;height: 20px" src="static/pngs/logo-title.png"></q-img>
      <q-space />
      <q-btn class="bar-btn" dense flat icon="mdi-pin" text-color="dark" />
      <q-btn class="bar-btn" dense flat icon="mdi-bell" text-color="dark" />
      <q-btn
        dense
        flat
        class="bar-btn"
        icon="mdi-window-minimize"
        text-color="dark"
        @click="minimize"
      />
      <q-btn
        dense
        flat
        class="bar-btn"
        icon="mdi-window-maximize"
        text-color="dark"
        @click="maximize"
      />
      <q-btn
        class="bar-btn-red"
        dense
        flat
        icon="mdi-close"
        text-color="dark"
        @click="close"
      />
    </q-bar>
    <div class="row no-wrap">
      <div class="col">
        <q-btn
          :ripple="false"
          class="menu-item full-width"
          size="20px"
          :color="currentRouteName=='Profile'?'blue-grey-8':''"
          @click="goto('Profile')"
        >
          <q-avatar size="22px">
            <img src="static/pngs/avatar.png" />
          </q-avatar>
        </q-btn>
      </div>
      <div class="col">
        <q-btn
          :ripple="false"
          class="menu-item full-width"
          size="20px"
          :text-color="currentRouteName=='Contacts'?'white': 'dark'"
          @click="goto('Contacts')"
        >
          <q-icon name="mdi-contacts" size="18px" />
        </q-btn>
      </div>
      <div class="col">
        <q-btn
          :ripple="false"
          class="menu-item full-width"
          size="20px"
          :disable="true"
          :text-color="currentRouteName=='Gallery'?'white':'dark'"
          @click="goto('Gallery')"
        >
          <q-icon name="mdi-folder-multiple-image" size="18px" />
        </q-btn>
      </div>
      <div class="col">
        <q-btn
          :ripple="false"
          class="menu-item full-width"
          size="20px"
          @click="goto('Room')"
          :text-color="currentRouteName=='Room'?'white':'dark'"
        >
          <q-icon name="mdi-google-classroom" size="18px" />
        </q-btn>
      </div>
      <div>
        <q-btn
          :ripple="false"
          class="menu-item full-width"
          size="20px"
          @click="goto('Settings')"
          :text-color="currentRouteName=='Settings'?'white':'dark'"
        >
          <q-icon name="mdi-cog" size="18px" />
        </q-btn>
      </div>
    </div>
    <q-page-container class="col col-grow">
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
const electron = require('electron');
@Component({})
export default class MainLayout extends Vue {
  private isMaximize = false;
  private currentRouteName = 'Profile';
  @Watch('$route')
  onRouteChange(val: any) {
    this.currentRouteName = val.name;
    console.log(this.currentRouteName);
  }

  goto(name: string) {
    this.$router.replace({ name });
  }

  created() {
    if (process.env.MODE === 'electron') {
      const win = electron.remote.BrowserWindow.getFocusedWindow();
      if (win) {
        if (win.isMaximized()) {
          this.isMaximize = false;
        } else {
          this.isMaximize = true;
        }
      }
    }
  }

  minimize() {
    if (process.env.MODE === 'electron') {
      const win = electron.remote.BrowserWindow.getFocusedWindow();
      if (win) {
        win.minimize();
      }
    }
  }

  maximize() {
    if (process.env.MODE === 'electron') {
      const win = electron.remote.BrowserWindow.getFocusedWindow();
      if (win) {
        if (win.isMaximized()) {
          win.unmaximize();
          this.isMaximize = false;
        } else {
          win.maximize();
          this.isMaximize = true;
        }
      }
    }
  }

  close() {
    if (process.env.MODE === 'electron') {
      const win = electron.remote.BrowserWindow.getFocusedWindow();
      if (win) {
        win.close();
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.bar-btn:hover {
  color: white !important;
}

.bar-btn-red:hover {
  color: $negative !important;
}

.title-bar {
  height: 20px;
}

.menu-btn-icon {
  width: 22px;
  height: 22px;
  color: #434a50;
  border: 0 solid #000;
}
</style>
